<template>
  <div class="tree-container">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button icon="el-icon-plus" type="primary" @click="handleAdd">
          添加系统字典
        </el-button>


      </vab-query-form-left-panel>
      <vab-query-form-right-panel>


      </vab-query-form-right-panel>
    </vab-query-form>
    <el-container style="height: 500px; border: 1px solid #ebeef5">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" style="width: 100%">






          <div  class="el-tree-wrap">
            <el-tree
              ref="tree"

              :expand-on-click-node="false"
              :load="loadNode"
              :props="defaultProps"
              class="vab-filter-tree"
              highlight-current
              leaf="true"
              lazy
              node-key="indexCode"
              @node-click="handleNodeClick"

            >
            <span slot-scope="{ node }" class="vab-custom-tree-node">
              <span class="vab-tree-item">
                <i v-if="node.data.rank == 4" class="el-icon-s-custom"></i>
                {{ node.label }}



              </span>
              <span class="vab-tree-options">

                <a class="vab-tree-btn" title="创建系统字典子项"   @click.stop="() => handlechildAdd(node, data, 0)">

                    <i class="el-icon-circle-plus-outline" ></i>

                </a>

              </span>
            </span>
            </el-tree>
          </div>
        </el-col>

      </el-aside>

      <el-container>


        <el-main>
          <el-table
            ref="tableSort"

            :data="list"

            v-loading="listLoading"

          >



            <el-table-column
              show-overflow-tooltip
              label="名称"
              prop="name"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="编号"
              prop="dcNo"
            ></el-table-column>
            <el-table-column label="禁用状态" prop="gender">
              <template slot-scope="scope">
                <span v-if="scope.row.disabled==false">启用</span>
                <span v-if="scope.row.disabled==true">禁用</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="备注"
              prop="remark"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="操作"
              width="280px"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button type="text"  @click="disableDictionary(scope.$index, scope.row,0)" v-if="!scope.row.disabled">
                  禁用
                </el-button>
                <el-button type="text"  @click="disableDictionary(scope.$index, scope.row,1)" v-if="scope.row.disabled">
                  启用
                </el-button>

              </template>
            </el-table-column>








          </el-table>
        </el-main>

      </el-container>
    </el-container>

    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="500px"

    >
      <el-form ref="from" :model="from"  label-width="80px" >
        <el-form-item label="字典标识" prop="mark">
          <el-input v-model="from.mark" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="字典名称" prop="name">
          <el-input v-model="from.name" autocomplete="off"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary"  @click="Saveadd">确 定</el-button>
      </div>


    </el-dialog>

    <el-dialog
      :title="titles"
      :visible.sync="dialogFormVisibles"
      width="500px"

    >

      <el-form ref="childform" :model="childform"  label-width="80px" >
        <el-form-item label="字典名称" prop="name">
          <el-input v-model="childform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="childform.remark" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button @click="close">取 消</el-button>
        <el-button type="primary"  @click="childformSaveadd">确 定</el-button>
      </div>

    </el-dialog>
    <el-pagination
      :background="background"


      :total="total"
      :page-size="form.limit"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
  import { search } from "@/api/dictionary";
  import { childsearch,disableDictionary } from "@/api/dictionary";
    import { childadd } from "@/api/dictionary";
    import { add } from "@/api/dictionary";
    export default {
        name: "Dictionary",
        data() {
            return {
                dialogFormVisible:false,
                dialogFormVisibles:false,
              background: true,
                 listLoading: true,
              childform:{

                name:"",
                disabled:false,
                index:0,
                remark: ''
              },
                Dictionary:{
                    "disabled": '',
                    "mark": ""
                },
              total:0,
              list:[],
                from:{
                    mark:"",
                    name:"",
                    disabled: false,
                },
                form:{
                  currPageNo: 1,
                    limit: 10,
                    mark:"",
                    name:"",
                    disabled:false
                },
                title:"添加系统字典",
                titles:"",
                defaultProps: {
                    children: "children",
                    label: "name",
                    leaf: true,

                },
                }


            },
               mounted() {
                 this.childsearch()

               },
      methods: {
            async loadNode(node, resolve) {
                if (node.level === 0) {
                    const {data} = await search();

                    return resolve(data);


                }
            },
          disableDictionary(id,row,disable){

              this.Dictionary.mark=row.mark
              this.Dictionary.name=row.name
              this.Dictionary.index=row.dcNo

              if(disable==0){

                     this.Dictionary.disabled=true

                }else {
                    this.Dictionary.disabled=false

                }
              disableDictionary(this.Dictionary).then(res => {

                  this.$baseMessage("操作成功",'success');
                  this.childsearch()


              })
              },
            handleAdd() {
              this.form.mark=""
              this.form.name=""

              this.dialogFormVisible=true
            },
            handlechildAdd(node,data,flag) {
                console.log(node)
              this.childform.name=""
            this.dialogFormVisibles=true
            this.childform.mark=node.data.mark
                this.titles=node.data.name
          },
            Saveadd(){
                this.$refs.from.validate(async (valid) => {
                    if (valid) {
                        console.log(this.from)
                        const {code} = await add(this.from);
                        if(code==200){
                            this.$baseMessage("添加成功");

                        }else {
                            this.$baseMessage("添加失败");
                        }

                    }
                });
            },
          childformSaveadd(){
            this.$refs.childform.validate(async (valid) => {
              if (valid) {

                 this.childform.index=Math.ceil(Math.random()*100000000);
                const {code,data} = await childadd(this.childform);
                console.log(data)
                if(code==200){
                  this.$baseMessage("添加成功");
                  this.childsearch()
                }else {
                  this.$baseMessage("添加失败");
                }

              }
            });
          },
          childsearch(){
            this.listLoading = true;

            childsearch(this.form).then(res => {

             console.log(res.data.total)
              this.list=res.data.data
              this.total=res.data.total


            })
            setTimeout(() => {
              this.listLoading = false;
            }, 500);
          },
          //点击树形组件事件
          handleNodeClick(data) {

            this.form.currPageNo=1
            this.total=0
            console.log(data.mark);
            this.form.mark = data.mark
            this.childsearch()

          },
        handleSizeChange(val) {
              console.log(val)
          this.form.limit = val;
          this.childsearch();
        },
        handleCurrentChange(val) {
          console.log(val)
          this.form.currPageNo = val;
          this.childsearch();
        },
            close(){
                this.dialogFormVisible=false
              this.dialogFormVisibles=false
            }




        }
    }
</script>

<style scoped>
  .tree-container >>>.el-icon-caret-right{
    display: none !important;


  }
  .tree-container >>>.vab-custom-tree-node{
    padding-left: 8px !important;
  }
  .tree-container >>>.el-tree-node__content{
    height:50px !important;
  }
</style>
